<template>
    <div style="flex: 1;background-color: #ffffff">
        <div class="top-area">
            <div class="top-return">
                <!--<image src="root:img/back.png" style="width: 80px;height: 80px;"></image>-->
            </div>
            <div class="top-body">
                <image class="top-photo" src="root:img/user_info_photo.png"></image>
            </div>
        </div>
        <div class="tab-area">
            <div @click="change(0)" :class="['tab-li', index == 0 ? 'active':'']">
                <text :class="['tab-t',index == 0 ? 'active-text':'']">工作</text>
            </div>
            <div @click="change(1)" :class="['tab-li', index == 1 ? 'active':'']">
                <text :class="['tab-t',index == 1 ? 'active-text':'']">动态</text>
            </div>
        </div>


        <host style="flex: 1" @change="onchange" :index="index">
            <div @load="load"  class="tab-content">

                <wxc-cell :has-arrow="true"
                          :has-top-border="true"
                          @wxcCellClicked="jumpUserInfo"
                          :auto-accessible="false">
                    <image class="image"
                           slot="label" style="width: 48px;height: 48px;"
                           src="root:img/user_info.png"></image>
                    <text class="user-info" slot="title">个人信息</text>
                </wxc-cell>
                <wxc-cell :has-arrow="true"
                          :has-top-border="true"
                          @wxcCellClicked="jumpSystemSet"
                          :auto-accessible="false">
                    <image class="image"
                           slot="label" style="width: 48px;height: 48px;"
                           src="root:img/setup.png"></image>
                    <text class="user-info" slot="title">系统设置</text>
                </wxc-cell>

                <wxc-button type="green" text="退出账户" :btnStyle="btnStyle"
                            @wxcButtonClicked="loginOut"></wxc-button>

                <!--<speech-list style="height: 100px;border-width: 1px;border-color: #00B4FF;"></speech-list>-->
                <head-bar></head-bar>

            </div>
            <div class="tab-content">
                <list class="list">
                    <refresh class="refresh" @refresh="onrefresh" @pullingdown="onpullingdown"
                             :display="refreshing ? 'show' : 'hide'">
                        <loading-indicator style="width: 50px;height: 50px;color: #00c26e;"
                                           class="indicator"></loading-indicator>
                    </refresh>
                    <cell class="cell" v-for="ele in dataList">
                        <div class="content speech-content">
                            <div class="item-head">
                                <image class="photo" src="root:img/my_photo.png"></image>
                                <div class="item-user-info">
                                    <div class="item-user-name" style="height: 40px;">
                                        <text style="line-height: 6px;font-size: 28px;width: 220px;margin-left: 15px;">
                                            {{ele.sourceUser}}
                                        </text>
                                        <text style="font-size: 28px;color:#999999;">{{ele.sectionName}}</text>
                                    </div>
                                    <div>
                                        <text style="font-size: 24px;color:#999999;">{{formatTime(ele.createTime)}}
                                        </text>
                                    </div>
                                </div>
                            </div>
                            <div class="item-content" @click="jumpSpeechDetail" :data-id="ele.id">

                                <text class="item-content-t">{{ textContent(ele.contentText)}}</text>

                                <div v-if="ele.contentType === '1300'" style="flex-direction: row;">
                                    <image class="speech-img" v-for="url in imgList(ele.contentFileKey)"
                                           placeholder="root:img/default_yx.png" :src="url"></image>
                                </div>

                                <audio-vue v-if="ele.contentType === '1100'" :time="ele.voiceTime"
                                           :audioSrc="vedioUrl(ele.contentFileKey)"></audio-vue>
                            </div>
                            <div class="item-footer">
                                <div class="item-footer-area item-footer-left">
                                    <image class="item-footer-i" src="root:img/read_icon.png"></image>
                                    <text class="item-footer-t">阅读({{ele.lookNum}})</text>
                                </div>
                                <div class="item-footer-area item-footer-middle">
                                    <image class="item-footer-i" src="root:img/conment_icon.png"></image>
                                    <text class="item-footer-t">评论({{ele.commentNum}})</text>
                                </div>
                                <div class="item-footer-area item-footer-right">
                                    <image class="item-footer-i" src="root:img/like_icon.png"></image>
                                    <text class="item-footer-t">赞({{ele.likeNum}})</text>
                                </div>
                            </div>
                        </div>
                    </cell>
                    <loading class="loading" @loading="loadDataMore" :display="loadinging ? 'show' : 'hide'">
                        <loading-indicator class="loading-indicator"></loading-indicator>
                    </loading>
                </list>
            </div>
        </host>
    </div>

</template>

<style>


    .tab-t{
        font-size:30px;
    }

    /*顶部区域*/
    .top-area {
        height: 350px;
        width: 750px;
        background-color: #00c470;
        flex-direction: column;
        padding-top: 50px;
    }

    /*返回导航条*/
    .top-return {
        height: 80px;
        width: 750px;
    }

    /*顶部主体*/
    .top-body {
        height: 200px;
        width: 750px;
        align-items: center;
        justify-content: center;
    }

    /*顶部头像*/
    .top-photo {
        background-color: #eeeeee;
        width: 150px;
        height: 150px;
        border-radius: 20px;
    }

    /*切换栏区域*/
    .tab-area {
        align-items: center;
        justify-content: center;
        height: 80px;
        width: 750px;
        background-color: white;
        flex-direction: row;
    }

    /*切换条*/
    .tab-li {
        flex: 1;
        align-items: center;
        justify-content: center;
        height: 80px;
        border-bottom-width: 1px;
        border-bottom-color: #9c9c9c;
    }

    /*活动栏*/
    .active {
        border-bottom-width: 2px;
        border-bottom-color: #00c470;
    }

    /*当前活动字体*/
    .active-text {
        color: #00c470;
    }

    /*标签栏目内容*/
    .tab-content {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background-color: #f0f0f0;
    }

    /*个人信息*/
    .user-info {
        width: 200px;
        margin-left:20px;
        font-size: 30px;
    }



    .refresh {
        align-items: center;
        justify-content: center;
    }

    .speech-img {
        width: 230px;
        height: 230px;
        margin-left: 5px;
        margin-right: 5px;
        margin-bottom: 5px;
        border-width: 1px;
        border-color: #e9e9e9;
    }

    .loading {
        width: 750px;
        display: -ms-flex;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: center;
        -webkit-align-items: center;
        -webkit-box-align: center;
        align-items: center;
    }

    .loading-indicator-text {
        color: #888888;
        font-size: 42px;
        text-align: center;
    }

    .loading-indicator {
        margin-top: 16px;
        height: 40px;
        width: 40px;
        color: blue;
    }

    .indicator-text {
        color: #888888;
        font-size: 42px;
        text-align: center;
    }

    .item-s-t {
        font-size: 24px;
        color: #999999;
        margin-right: 20px;
    }

    .article-item-content {
        flex-direction: row;
        padding-top: 32px;

    }

    .article-item-content-img {
        margin-bottom: 32px;
        width: 200px;
    }

    .article-item-content-title {
        flex-direction: column-reverse;
        width: 520px;
        padding-right: 20px;
        height: 268px;
    }

    .item-footer-i {
        width: 34px;
        height: 23px;
        margin-right: 5px;
    }

    .item-footer-t {
        font-size: 25px;
        color: #272727;
    }

    .item-footer-area {
        width: 240px;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .item-footer {
        height: 78px;
        flex-direction: row;
        border-top-width: 1px;
        border-top-color: #f0f0f0;
        margin-top: 20px;
    }

    .item-content-t {
        font-size: 32px;
        color: #272727;
    }

    .item-content {
        padding-top: 20px;
    }

    .item-user-info {
        flex-direction: column-reverse;
        margin-left: 10px;
    }

    .item-user-name {
        font-size: 30px;
        margin-bottom: 15px;
        font-weight: bold;
        flex-direction: row;
    }

    .photo {
        height: 80px;
        width: 88px;
        border-radius: 100px;
        margin-left: 10px;

        border-width: 1px;
        border-color: #717171;
    }

    .item-head {
        flex-direction: row;
        margin-top: 32px;
    }

    .item-container {
        width: 750px;
        background-color: #f2f3f4;
    }

    .border-cell {
        background-color: #f2f3f4;
        width: 750px;
        height: 100px;
        align-items: center;
        justify-content: center;
        border-bottom-width: 1px;
        border-style: solid;
        border-color: #e0e0e0;
    }

    .cell {
        background-color: #ffffff;
    }

    .content {
        width: 750px;
        border-bottom-width: 10px;
        border-bottom-color: #F6F6F6;
        /*align-items: center;*/
        /*justify-content: center;*/
        padding-left: 15px;
        padding-right: 15px;
    }


</style>

<script>
    import {WxcCell, WxcButton} from 'weex-ui'
    import {speechList} from '../components/speechList.vue'
    import {headBar} from '../components/headBar.vue'
    import nw from '../network/nw.js'
    import dtl from '../utils/dateUtils.js'


    var nav = weex.requireModule("navigator")
    var pref = weex.requireModule("pref")

    import utils from '../utils/utils.js'

    export default {
        components: {WxcCell, WxcButton,speechList,headBar},
        data() {
            return {
                logoUrl: 'http://img1.vued.vanthink.cn/vued08aa73a9ab65dcbd360ec54659ada97c.png',
                target: 'World',
                index: 0,
                btnStyle: {//退出按钮的样式
                    'margin-top': 100,
                    'margin-left': 20,
                    'height': 70,
                    'border-radius': 5
                },
                dataList: [],
                from:1,//加载第几页数据
                refreshing: false,//是否重新加载
                loadinging: false//是否加载更多
            }
        },
        methods: {

            onchange(p) {
//                this.toast(p.index)
            },

            //切换工作或动态
            change(i) {
                this.index = i
            },

            //跳转到用户信息页面
            jumpUserInfo(event){
                if(!utils.lockEventDeferFree(event.e)) {
                    nav.push('root:com/yx/user/userInfo.js')
                }
            },
            //跳转到用户信息页面
            jumpSystemSet(event){
                if(!utils.lockEventDeferFree(event.e)) {
                    nav.push('root:com/yx/user/systemSet.js')
                }
            },

            //退出登录
            loginOut(event){
                if(!utils.lockEventDeferFree(event.e)) {
                    //清空存储sid
                    pref.setString('sid', '')
                    nav.push('root:com/yx/login/login.js')
                    //设置重复跳转登录页面
                    var statc=weex.requireModule("static")
                    statc.setString('toLoginStat',true)
                }
            },

            //加载更多数据
            loadDataMore() {
                this.from = this.from + 1
                this.loadData(this.from)
            },

            formatTime: function (time) {
                return dtl.formatDay(time)
            },

            //内容处理
            textContent(content) {
                if (content == undefined || content == null) {
                    return ''
                }
                content = decodeURIComponent(content)
                return content.length > 66 ? (content.substring(0, 60) + '.....') : content
            },

            //获取媒体地址
            vedioUrl(keyUrl) {
                var arr = keyUrl.split(',')
                return arr[1]
            },

            //刷新数据
            onrefresh(event) {
                this.from = 1
                this.loadData(this.from)
            },

            //加载数据
            loadData(from) {
                var self = this
                var repData = {}
                if (!from) {
                    repData.from = 1
                }else{
                    repData.from = from
                }
                repData.size = 10
                if (repData.from <= 1) {
                    self.refreshing = true
                } else {
                    self.loadinging = true
                }


                nw.postDefine('/app/yxq/user/dynamic', {
                    data: repData,
                    success(res) {
                        if (repData.from <= 1) {
                            self.dataList = res
                            self.refreshing = false
                        } else {
                            console.info(112)
                            for (let i in res) {
                                self.dataList.push(res[i])
                            }
                            self.loadinging = false

                        }
                    }
                })
            },

            //跳转个人言论详情
            jumpSpeechDetail(event){
                if(!utils.lockEventDeferFree(event)) {
                    nav.pushParam('root:com/yx/speech/speechDetail.js',{id:event.target.attr.dataId} )
                }
            }
        },
        mounted() {
            var self = this
            this.loadData(1)
        }
    }
</script>